{extend name="base"}
{block name="main"}

<div id="app" v-cloak>
	<el-menu mode="horizontal" :default-active="wsNav.activeIndex">
		<el-menu-item :index="v.name" v-for="v of nav" class="p0">
			<a class="block p_x20" :href="v.href" v-text="v.title"></a>
		</el-menu-item>
	</el-menu>
	
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button @click="onSubmit(true,'{:url(\'close\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">启用/禁用</el-button>
			<el-button type="primary" size="small" @click="dialogVisible=true">添加设备</el-button>
			<el-button type="primary" size="small" @click="showExcel">导入Excel</el-button>
		</el-col>
		<el-col :span="14" style="text-align: right;">
			<el-form :model="params" inline label-width="0px" size="small">
				<el-form-item label="">
				    <el-input v-model="params.val" placeholder="搜索关键词" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="params.type" placeholder="请选择">
						<el-option
						  label="昵称"
						  value="name">
						</el-option>
						<el-option
						  label="UDID"
						  value="udid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary" size="mini" @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID" align="center" width="70" sortable></el-table-column>
		<el-table-column prop="name" label="设备名称" align="center"></el-table-column>
		<el-table-column prop="version" label="版本号" sortable></el-table-column>
		<el-table-column prop="sex" label="性别" sortable :formatter="sexFormats"></el-table-column>
		<el-table-column prop="tel" label="联系号码"></el-table-column>
		<el-table-column prop="udid" label="UDID"></el-table-column>
		<el-table-column prop="s_time" label="更新时间" :formatter="dateFormats" sortable></el-table-column>
		<el-table-column label="状态" sortable>
			<template slot-scope="scope">
				<template v-if="scope.row.status">
					启用
				</template>
				<template v-else>
					禁用
				</template>
			</template>
		</el-table-column>
		<el-table-column prop="remark" label="备注"></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

				<el-button type="danger" size="mini" class="ws-mini" @click="close(scope.row)" v-if="scope.row.status">禁用</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="close(scope.row)" v-else>启用</el-button>

				<el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="readSoft(scope.row)">查看账号</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="readSoft(scope.row,true)">添加账号</el-button>
				<el-button type="warning" size="mini" class="ws-mini" @click="debug(scope.row)">调试</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="page">{$list->render()|raw}</div>
	
	<!-- 添加、编辑设备 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="dialogVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="设备名称" prop="name">
				<el-input v-model="data.name" placeholder="设备名称"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-radio-group v-model="data.sex">
				    <el-radio :label="1">男</el-radio>
				    <el-radio :label="0">女</el-radio>
				    <el-radio :label="2">保密</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="版本号" prop="version">
				<el-input type="text" v-model="data.version" placeholder="版本号"></el-input>
			</el-form-item>
			<el-form-item label="手机UDID" prop="udid">
				<el-input type="text" v-model="data.udid" placeholder="手机UDID"></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="tel">
				<el-input type="tel" v-model="data.tel" placeholder="手机号码"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="dialogVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑设备 end -->

	<!-- 导入Excel 区域 -->
	<link rel="stylesheet" href="{:_static()}/wsvue/index.css">
	<script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
	<script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>

	<ws-excel :area="area" @ext-error="error" :title="title" :options="options" v-model="show" @change="change"></ws-excel>

</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		nav:{$_nav|stripslashes|raw}, 
		checkData:[], // 选中数据
		params:{$params|json_encode|raw},

		dialogVisible:false, // 显示添加、编辑框
		dialogTitle:'添加设备', // 添加、编辑框标题
		data:{}, // 添加、编辑数据
		rules:{
			name:[
				{required: true, message:'请输入用户名'},
			],
			udid:[
				{required: true, message:'手机UDID不能为空'},
			],
			
		},

		// 导入相关
		options:['名称','登录名','版本号','性别(0：女 1:男 2：保密)','联系号码','手机UDID'],
		show:false,
		title:'设备导入',
		area:['800','400'],
	},
	created(){
		this.emptyData();
	},
	watch:{
		dialogVisible(newVal){
			if(!newVal&&this.data.id){
				this.emptyData();
				this.dialogTitle='添加设备';
			}
		}
	},
	methods:{
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		showExcel(show=true){
			this.show=show;
		},
		change(data){
			this._wspost("{:url('addAll')}",{data});
			this.showExcel(false);
		},
		error(ext){
			this.$message({
				message:'错误的文件后缀名：'+ext,
				type:'error'
			})
		},
		emptyData(newData={}){
			this.data=Object.assign({
				name:'',
				sex:2,
				version:'',
				udid:'',
				tel:'',
			},newData);
		},
		// 设备启用、禁用
		close(row){
			this._wspost("{:url('close')}",{id:row.id},res=>{
				if(res.code){
					row.status=Math.abs(row.status-1);
				}
			},false);
		},
		edit(data){
			this.emptyData(data);
			this.dialogTitle='设备编辑';
			this.dialogVisible=true;
		},
		// 查看、添加账号
		readSoft(data,addVisible=false){
			location.href="{:url('software/index')}?dev="+data.id+"&addVisible="+addVisible;
		},
		// 查询
		search(){
			let params=this.params,queryStr='';
			for(let key in params){
				if(queryStr.length>0){
					queryStr+='&';
				}else{
					queryStr+='?';
				}
				queryStr+=key+'='+params[key];
			}
			location.href="{:url('')}"+queryStr;
		},
		debug(data){
			window.open("{:url('debug')}?dev="+data.id);
		}
	}
});
</script>

{/block}